<template>
<div>

  <!--页面头-->
  <nav class="navbar navbar-default">
    <div class="container-fluid">
      <!-- Brand and toggle get grouped for better mobile display -->
      <div class="navbar-header">
        <a class="navbar-brand" href="#">学生选课管理</a>
      </div>
      <!-- Collect the nav links, forms, and other content for toggling -->
      <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
        <ul class="nav navbar-nav">
          <li><router-link :to="{path:'/Course'}" replace>课程管理</router-link></li>
          <li><router-link :to="{path:'/Login'}" replace>学生管理</router-link></li>
          <li><router-link :to="{path:'/coursemage'}" replace>选课管理</router-link></li>
          <li><router-link :to="{path:'/Stucou'}" replace>选课明细表</router-link></li>
        </ul>
      </div><!-- /.navbar-collapse -->
    </div><!-- /.container-fluid -->
  </nav>
  <!--页面表头结尾-->

  <!--学生信息表格-->
  <div id="course">
    <!--学号/姓名查询表单-->
    <form class="form-inline">
      <div class="form-group">
        <input type="text" class="form-control" v-model="cname" placeholder="输入编号/名称">
      </div>
      <button type="button" class="btn btn-default" @click="queryParams" >
        <span class="glyphicon glyphicon-search" aria-hidden="true"></span>
      </button>
    </form>
    <br/>
    <table class="table table-hover">
      <thead bgcolor="#dcdcdc">
      <th></th>
      <th>课程编号</th>
      <th>课程名称</th>
      <th>学分</th>
      <th>学时</th>
      <th>备注</th>
      <th></th>
      </thead>
      <tr v-for="cou in courseList">
        <td>
          <input type="checkbox" name="removeCks" :value="cou.cId" style="display: none;">
        </td>
        <td v-text="cou.cId"></td>
        <td v-text="cou.cName"></td>
        <td v-text="cou.cNum"></td>
        <td v-text="cou.cTime"></td>
        <td v-text="cou.cRemark"></td>
        <td>
          <button type="button" class="btn btn-default glyphicon glyphicon-tags" data-toggle="modal" data-target="#myModalEdit" @click="toEdit(cou.cId)">
            修改
          </button>
          <button type="button" class="btn btn-default glyphicon glyphicon-remove-circle" data-toggle="modal" @click="removeCou(cou.cId)" data-target="#myModalDel">
            删除
          </button>
          <!--删除模态框-->
          <!-- Modal -->
          <div class="modal fade" id="myModalDel" tabindex="-1" role="dialog" aria-labelledby="myModalLableDel">
            <div class="modal-dialog modal-sm" role="document">
              <div class="modal-content">
                <div class="modal-header">
                  <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                  <h4 class="modal-title" id="myModalLableDel">删除确认</h4>
                </div>
                <div class="modal-body">
                  确定要删除编号为{{couNoId}}的课程吗？
                </div>
                <div class="modal-footer">
                  <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                  <button type="button" class="btn btn-primary" @click="removeCouOk(couNoId)" >确定</button>
                </div>
              </div>
            </div>
          </div>
        </td>
      </tr>
    </table>

    <!--修改模态框-->
    <div class="modal fade" id="myModalEdit" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
      <div class="modal-dialog" role="document">
<!--        action="http://localhost:8002/course/edit"-->
        <form class="form-horizontal" @submit="couEdit">
          <div class="modal-content">
            <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">×</span>
              </button>
              <h4 class="modal-title" id="myModalLabel">修改课程</h4>
            </div>
            <div class="modal-body">

              <!--课程编号-->
              <div class="form-group">
                <label for="cId" class="col-sm-2 control-label">课程编号</label>
                <div class="col-sm-10">
                  <input type="hidden" v-model="couToEdti.cid">
                  <input type="text"  v-model="couToEdti.cid" class="form-control" required oninvalid  placeholder="课程编号" disabled="disabled">
                </div>
              </div>
              <!--课程名称-->
              <div class="form-group">
                <label for="sName" class="col-sm-2 control-label">课程名称</label>
                <div class="col-sm-10">
                  <input type="text" v-model="couToEdti.cname" required oninvalid class="form-control" id="sName" placeholder="课程名称">
                </div>
              </div>
              <!--学分-->
              <div class="form-group">
                <label for="smajor" class="col-sm-2 control-label">学分</label>
                <div class="col-sm-10">
                  <input type="text"  v-model="couToEdti.cnum" oninput = "value=value.replace(/[^\d]/g,'')" required oninvalid class="form-control" id="smajor" placeholder="学分">
                </div>
              </div>
              <!--学时-->
              <div class="form-group">
                <label for="sTime" class="col-sm-2 control-label">学时</label>
                <div class="col-sm-10">
                  <input type="text" v-model="couToEdti.ctime" oninput = "value=value.replace(/[^\d]/g,'')" required oninvalid class="form-control" id="sTime" placeholder="学时">
                </div>
              </div>
              <!--备注-->
              <div class="form-group">
                <label for="cRemark" class="col-sm-2 control-label">备注</label>
                <div class="col-sm-10">
                  <textarea class="form-control" rows="3" id="cRemark"  v-text="couToEdti.cremark" placeholder="备注" ></textarea>
                </div>
              </div>

            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
              <button type="submit" class="btn btn-primary">修改</button>
            </div>
          </div>
        </form>
      </div>
    </div>
    <!--修改模态框尾-->

    <!--页面低端-->
    <!-- 底部 -->
    <div class="navbar navbar-default navbar-fixed-bottom" style="height: 50px;background-color: gainsboro;" >
      <div class="container" align="center" style="margin-top: -13px" >
        <ul class="pagination" >
          <li>
            <a href="#" @click="TopPg" aria-label="Previous" >
              <span aria-hidden="true">&laquo;</span>
            </a>
          </li>
          <li>
            <a href="#" @click="pageBack" aria-label="Previous" >
              <span aria-hidden="true">&#139;</span>
            </a>
          </li>
          <li class=""  v-for="c in countNum" >
            <a href="#" @click="numberPg(c)" v-text="c">1<span class="sr-only">(current)</span></a>
          </li>
          <li>
            <a href="#" @click="pageNext"  aria-label="Next">
              <span aria-hidden="true">&#155;</span>
            </a>
          </li>
          <li>
            <a href="#" @click="lastPg" aria-label="Next">
              <span aria-hidden="true">&raquo;</span>
            </a>
          </li>
        </ul>
      </div>
      <div style="float: right;margin-top: -60px;margin-right: 5px">
        <button type="button" class="btn btn-primary  glyphicon glyphicon-plus-sign" @click="queryCouId" data-toggle="modal" data-target="#myModalAdd" style="background-color: black">
          新增
        </button>
        <button type="button" class="btn btn-primary  glyphicon glyphicon-remove-circle" @click="removeBut" id="removeBut" style="background-color: black">
          删除
        </button>
        <!--        确认删除-->
        <button type="button" id="removeButOk" @click="removeButOk"  class="btn btn-danger  glyphicon glyphicon-ok-circle" style="display: none">
          确认删除
        </button>
        <!--        取消删除-->
        <button type="button" id="removeButNo" @click="removeButNo"   class="btn btn-danger  glyphicon glyphicon-remove-circle" style="display: none">
          取消删除
        </button>
      </div>
    </div>
    <!--页面低端尾-->
  </div>
  <!--新增模态框-->
  <div class="modal fade" id="myModalAdd" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
<!--      action="http://localhost:8002/course/save"-->
      <form class="form-horizontal" @submit="saveCou">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">×</span>
            </button>
            <h4 class="modal-title" id="">新增课程</h4>
          </div>
          <div class="modal-body">

            <!--编号-->
            <div class="form-group">
              <label for="cId" class="col-sm-2 control-label">课程编号</label>
              <div class="col-sm-10">
                <input type="hidden" v-model="cou_save.cid" id="hiddenId" >
                <input type="text" v-model="cou_save.cid"  class="form-control" id="cId" placeholder="课程编号" disabled="disabled">
              </div>
            </div>
            <!--课程名称-->
            <div class="form-group">
              <label for="sName" class="col-sm-2 control-label">课程名称</label>
              <div class="col-sm-10">
                <input type="text" v-model="cou_save.cname"   required oninvalid class="form-control"  placeholder="课程名称">
              </div>
            </div>
            <!--学分-->
            <div class="form-group">
              <label for="smajor" class="col-sm-2 control-label">学分</label>
              <div class="col-sm-10">
                <input type="text" v-model="cou_save.cnum"  oninput = "value=value.replace(/[^\d]/g,'')" required oninvalid class="form-control"  placeholder="学分">
              </div>
            </div>
            <!--学时-->
            <div class="form-group">
              <label for="sTime" class="col-sm-2 control-label">学时</label>
              <div class="col-sm-10">
                <input type="text" v-model="cou_save.ctime"  oninput = "value=value.replace(/[^\d]/g,'')" required oninvalid class="form-control"  placeholder="学时">
              </div>
            </div>
            <!--备注-->
            <div class="form-group">
              <label for="" class="col-sm-2 control-label">备注</label>
              <div class="col-sm-10">
                <textarea class="form-control" v-model="cou_save.cremark" rows="3"  placeholder="备注"></textarea>
              </div>
            </div>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
            <button type="submit" class="btn btn-primary">新增</button>
          </div>
        </div>
      </form>
    </div>
  </div>

<!-- ===== -->
</div>
</template>

<script>
export default {
  name: "Course",
  data(){
    return{
      //存储课程信息
      courseList:[],
      //条件查询参数存储
      cname:"",
      //设置每页数数量
      Count:4,
      //设置开始页数
      Pages:0,
      //存储总页数
      countNum:0,
      //存储数据总条数,
      pageSum:0,
      //多选删除存储课程编号
      removeCkArray:[],
      //存储修改查询课程信息
      couToEdti: {
        cid:"",
        cname:"",
        cnum:"",
        ctime:"",
        cremark:""
      },
      //删除存储课程id
      couNoId:"",
      //新增存储自动生成id
      cou_save: {
        cid:"",
        cname:"",
        cnum: "",
        ctime:"",
        cremark: ""
      }
    }
  },
  created() {
    this.getCourseList();
    this.cuontPages();
  },

  methods: {
    //课程修改操作
    couEdit(){
      let arr =[];
      arr.push(this.couToEdti.cname);
      arr.push(this.couToEdti.cnum);
      arr.push(this.couToEdti.ctime);
      arr.push(this.couToEdti.cremark);
      arr.push(this.couToEdti.cid);
      this.axios.get("http://localhost:8002/course/edit",{
        params:{
          arr
        }
      }).then(response =>{
       this.getCourseList();
      })
      $("#myModalEdit").modal("hide");

    },
    //课程新增操作
    saveCou(){
      let arr =[];
      arr.push(this.cou_save.cid);
      arr.push(this.cou_save.cname);
      arr.push(this.cou_save.cnum);
      arr.push(this.cou_save.ctime);
      arr.push(this.cou_save.cremark);
      this.axios.get("http://localhost:8002/course/save",{
        params:{
          arr
        }
      }).then(response =>{
        this.getCourseList();
      })
    },
    //新增查询课程编号自动生成
    queryCouId(){
      this.axios.get("http://localhost:8002/course/counoid").then(response => {
        // var stuid = $("#sId").val();
        this.cou_save.cid=response.data[0].cid+1;
        //alert(response.data[0].sid);
        // $("#hiddenId").val(stuid.val());
      });
    },
    //删除学生
    removeCou(cid){
      this.couNoId=cid;
    },
    //修改查询
    toEdit(cid){
      this.axios.get('http://localhost:8002/course/toedit',{
        params: {
          "cid":cid
        }
      }).then(response => {
        //后台查询得到学生信息赋值
        console.log(response.data);
        const obj = response.data[0];
        console.log(obj+"课程修改信息");
        this.couToEdti.cid = obj.cId;
        this.couToEdti.cname = obj.cName;
        this.couToEdti.cnum = obj.cNum;
        this.couToEdti.ctime = obj.cTime;
        this.couToEdti.cremark = obj.cRemark;
      });
    },
    //多选删除隐藏
    removeBut(){
      $("input[name='removeCks']").toggle(true);
      $("#removeBut").toggle(false);
      //显示是否确认删除按钮
      $("#removeButOk").toggle(true);
      $("#removeButNo").toggle(true);
    },
    //取消删除按钮操作
    removeButNo(){
      //删除按钮显示
      $("#removeBut").toggle(true);
      //隐藏是否确认删除按钮
      $("#removeButOk").toggle(false);
      $("#removeButNo").toggle(false);
      //复选框隐藏
      $("input[name='removeCks']").toggle(false);
      //复选框选中自动取消
      $("input[name='removeCks']").prop("checked",false);
    },
    //多选删除确认删除操作
    removeButOk(){
      //遍历循环以选中的复选框
      var len = $("input[name='removeCks']:checked");
      for (var i=0;i<len.length;i++){
        this.removeCkArray.splice(0,0,len[i].value);
      }
      this.axios.get("http://localhost:8002/course/removeCk",{
        params:{
          "delArray":this.removeCkArray
        }
      }).then(response =>{

      });
      $("input[name='removeCks']").prop("checked",false);
      this.getCourseList();
      this.cuontPages();
    },
    //确认删除
    removeCouOk(cid){
      this.axios.get("http://localhost:8002/course/delete",{
        params:{
          "cid":cid
        }
      })
      $("#myModalDel").modal("hide");
      //回调函数
      this.getCourseList();
      this.cuontPages();
    },
    //一键到达顶页
    TopPg(){
      //0表示为第一页
      this.Pages=0;
      this.getCourseList();
    },
    //一键到达尾页
    lastPg(){
      //页数改变-- 总数据条数-每页数量=尾页索引
      //this.Pages=this.pageSum-this.Count;
      if(this.Pages<(this.pageSum-this.Count)){
        //页数改变-- 总数据条数-每页数量=尾页索引
        this.Pages=this.pageSum-this.Count;
        this.getCourseList();
      }else{
        alert("已到达尾页!");
      }

    },
    //点击数字换页
    numberPg(n){
      //页数改变-- (n表示第几页*每页数量)-每页数量  （从0开始查询为第一页） 结果得到要查询的页数
      this.Pages=(n*this.Count)-this.Count;
      this.getCourseList();

    },
    //上一页操作
    pageBack(){
      //this.Pages=this.Pages-this.Count;
      console.log(this.Pages);
      //页数改变  每点击一次  页数索引-每页数量  直到减到页数索引为0后停止 （0表示为第一页开始）
      if(this.Pages!=0){
        this.Pages=this.Pages-this.Count;
        this.getCourseList();
      }else{
        alert("已到达顶页!");
      }


    },
    //下一页操作
    pageNext(){
      //页数改变  每点击一次  页数索引+每页数量
      //直到家到页数索引为数据总条数后停止（0表示为第一页开始）
      //因为从0索引开始加 所以总数据条数要-每页页数数量
      //判断如果Pages的页数超过数据数量的页数则停止下一页
      if(this.Pages<(this.pageSum-this.Count)){
        //每点击一次页数发生改变
        this.Pages=this.Pages+this.Count;
        //回调方法
        this.getCourseList();
      }else{
        alert("已到达尾页!");
      }

    },
    //查询总页数
    cuontPages(){
      this.axios.get("http://localhost:8002/countpage").then(response =>{
        let num = response.data[0].pgCount;
        this.pageSum = num;
        console.log(num);
        let count = this.Count;
        let countNum = num/count;
        //获取一共多少页
        if(countNum>parseInt(countNum)){
          this.countNum=parseInt(countNum)+1;
        }else{
          this.countNum=countNum;
        }

      })
    },
    //条件查询方法
    queryParams(){
      this.getCourseList();
      this.Pages=0;
    },
    getCourseList() {
      this.axios.get('http://localhost:8002/course',{
        params:{
          "CidAndName":this.cname,
          //页数
          "Pages":this.Pages,
          //每页数量
          "Count":this.Count
        }
      }).then(response => {
        console.log(response);
        this.courseList = response.data;
      });
    }
  }
}
</script>

<style scoped>

</style>
